<template>
    <div class="iframe">
        <div class="i-title">
            <h3>图片优化</h3>
        </div>
        <div class="i-tip">
            <el-tabs v-model="data.activeName" class="demo-tabs">
                <el-tab-pane label="正常" name="first">
                    <el-image fit="contain" :src="data.a" />
                    <img fit="contain" :src="data.a" />
                    <div>
                        <el-button @click="changeImg(0)">异常</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="优化" name="second">
                    <el-image @error="handlerErr(1)" fit="contain" :src="data.b" />
                    <img @error="handlerErr(1)" fit="contain" :src="data.b" />
                    <div>
                        <el-button @click="changeImg(1)">异常</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import img_a1 from '/@/assets/images/img_a1.png';
import img_a2 from '/@/assets/images/img_a2.png';
import error from '/@/assets/images/error.png'
let data = reactive({
    activeName: 'first',
    a: img_a1,
    b: img_a2,
    error: error
})
let changeImg = (v) => {
    if (v == 0) {
        data.a = ""
    }
    else if (v == 1) {
        data.b = ""
    }
}
let handlerErr = (t) => {
    if (t == 1) {
        data.b = data.error;
    }
}
</script>
<style scoped>
img,
.el-image {
    width: 300px;
    height: 200px;
    border: solid 1px #eee;
    margin-right: 20px;
}
</style>